<template>
    <div>
        <!-- 
            计算属性：在不改变原始数据的情况下，对数据进行操作(计算 排序)重新渲染
            1.在computed中定义函数，必须有return，并且不能和data,methods中的方法和变量重名
            2.渲染问题, 计算属性中的函数以变量形式输出,不带()
            3.同步操作，可以用来监听依赖数据的变化
        
        -->
        <p>西红柿今天{{ a }}块钱一个, 你买{{ b }}个,一共{{ sum }}钱</p>
        <button @click="add">涨价五块</button>
        <button @click="addNum">多买五个</button>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                a:5,
                b: 10
            }  
        },
        methods:{
            add(){
                this.a += 666
            },
            addNum(){
                this.b += 5
            }
        }, 
        computed:{
            // 当a，b发生变化时，sum也同步改变
            sum(){
                return this.a * this.b
            }
        }  
    }
</script>
<style lang="scss">
</style>